<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col q-pr-sm">
        <q-card class="my-card">
          <q-card-section>
            <div class="text-h6">通知中心</div>
          </q-card-section>
          <q-separator />

          <q-card-section>
            <div class="row justify-between items-center">
              <div>最近收到的通知</div>
              <div>
                <q-select dense options-dense v-model="seletVal" :options="options" filled />
              </div>
            </div>
          </q-card-section>
          <q-card-section>
            <q-item v-for="item in rows" :key="item.id">
              <q-item-section top avatar>
                <q-avatar size="38px">
                  <q-img
                    error-src="/images/default-avatar.png"
                    :src="item.createUserInfo.avatar"
                    :ratio="1 / 1"
                  />
                </q-avatar>
              </q-item-section>
              <q-item-section>
                <q-item-label lines="2">
                  <RouterLink
                    class="text-primary decoration-none"
                    :to="`personal/${item.createUserInfo.id}/create`"
                  >
                    {{ item.createUserInfo.username }}
                  </RouterLink>
                  <span>
                    {{ getLabel(item.noticeType) }}
                  </span>
                  <RouterLink class="text-primary decoration-none" :to="`/blog/${item.artId}`">
                    {{ item.comment ? item.comment : item.articleTitle }}
                  </RouterLink>
                </q-item-label>
              </q-item-section>
              <q-item-section side>
                <q-item-label>{{ item.noticeTime }}</q-item-label>
              </q-item-section>
            </q-item>

            <q-item v-show="loading">
              <q-item-section>
                <q-item-label>
                  <div class="leading-relaxed">
                    <q-skeleton type="text" />
                    <span class="text-gray-8">
                      <q-skeleton type="text" />
                    </span>
                  </div>
                </q-item-label>
              </q-item-section>
            </q-item>
            <q-item v-show="!loading && pageParam.recordCount == 0">
              <q-item-section class="text-center"> 暂无消息 </q-item-section>
            </q-item>
            <div class="row justify-center" v-if="pageParam.totalPage > 1">
              <q-btn
                dense
                :loading="loading"
                flat
                :disable="pageParam.recordCount == 0 || pageParam.pageNum == pageParam.totalPage"
                :label="pageParam.pageNum >= pageParam.totalPage ? '已加载全部' : '加载更多'"
                @click="
                  () => {
                    pageParam.pageNum++
                    load()
                  }
                "
              />
            </div>
          </q-card-section>
        </q-card>
        <q-space />
      </div>
      <div class="col-3 gt-xs">
        <div class="sticky" :style="'top: ' + webStore.topVal">
          <div><HotUserCard></HotUserCard></div>
        </div>
      </div>
    </div>

    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import HotUserCard from 'src/components/HotUserCard.vue'
import SuspensionBtn from 'src/components/SuspensionBtn.vue'
import type { ApiType } from 'src/service/api'
import { noticeInit, noticeList } from 'src/service/api/notice'
import { useWebStore } from 'src/stores/webStore'
import { onMounted, ref, watch } from 'vue'
const webStore = useWebStore()

const seletVal = ref<Api.SelectVO>({
  value: '-1',
  label: '全部类别',
})

watch(seletVal, (val) => {
  pageParam.value.type = Number.parseInt(val.value)
  f5()
})

const options = ref<Array<Api.SelectVO>>([])

const getLabel = (noticeType: number) => {
  const item = options.value.filter((i) => i.value == noticeType + '')[0]
  if (item) {
    return item.label
  } else {
    return ''
  }
}

const pageParam = ref({
  type: -1,
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
})

type rowType = ApiType<typeof noticeList>['Return']['rows'][0]
const rows = ref<Array<rowType>>([])

const loading = ref(false)

const f5 = () => {
  pageParam.value.pageNum = 1
  rows.value = []
  load()
}

const load = () => {
  loading.value = true
  noticeList(pageParam.value).then(({ data, error }) => {
    loading.value = false
    if (!error) {
      rows.value.push(...data.rows)
      pageParam.value.pageNum = data.pageNum
      pageParam.value.pageSize = data.pageSize
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
    }
  })
}

onMounted(() => {
  f5()
  noticeInit().then(({ data, error }) => {
    if (error) return
    options.value = data
  })
})
</script>

<style scoped></style>
